<template>
  <div>
    <el-dialog class="dialog" :visible.sync="visible" :width="width" :modal-append-to-body="false" :show-close="true"
      :close-on-click-modal="false" :before-close="hide" :style="{ '--el-dialog-height': height }">
      <template slot="title">
        <div class="close" @click="hide"></div>
        <div class="dialog-header">
          <div class="header-title">{{ '记录' }}</div>
        </div>
      </template>
      <div class="dialog-body">
        <div class="search-box">
          <div class="form-box">
            <el-form ref="queryForm" :model="form" size="small" :inline="true" @submit.native.prevent>
              <el-form-item label="订场人" prop="activityName">
                <el-input v-model="form.nickName" placeholder="请输入订场人" clearable :spellcheck="false"
                  @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-form>
          </div>
          <div class="btn-box">
            <div class="left-box">
              <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetForm">重置</el-button>
            </div>
          </div>
        </div>
        <div class="table-box">
          <el-table v-loading="dataLoading" :data="tableData" :style="{width: '100%'}" height="100%">
            <el-table-column v-for="item in tableColumn" :key="item.prop" :label="item.label" :prop="item.prop"
              :class-name="item.className" :width="item.width" :min-width="item.minWidth" :sortable="item.sortable"
              :align="item.align || 'center'" :show-overflow-tooltip="item.showOverflowTooltip" :fixed="item.fixed"
              :resizable="false">
              <template slot-scope="{row}">
                <!-- 是否邮寄 -->
                <span v-if="item.prop == 'isMailed'">{{ isMailedObj[row[item.prop]] }}</span>
                <!-- 物流状态 -->
                <span v-else-if="item.prop == 'logisticsStatus'">{{ logisticsStatusObj[row[item.prop]] }}</span>
                <!-- 操作 -->
                <!-- <span v-else-if="item.prop == 'handle'" class="handle">
                  <el-link type="primary" @click="showGiftEditDialog(row)">修改</el-link>
                </span> -->
                <!-- 默认 -->
                <span v-else>{{ row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getData" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFileNameFromURL } from '@/utils/index.js';
import * as api from '@/api/bookingManger/index.js';
import * as fileApi from '@/api/file/index.js';

export default {
  name: 'BookRecordDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '80%',
    },
  },
  data() {
    return {
      dataLoading: false,
      total: 0, // 总条数
      defaultTableColumn: [
        { label: '订场人', prop: 'nickName', minWidth: 120 },
        { label: '场地', prop: 'fieldName', minWidth: 120 },
        { label: '订场时间', prop: 'bookTimePeriod', minWidth: 150 },
        // { label: '操作', prop: 'handle', minWidth: 100 },
      ],
      tableColumn: [],
      tableData: [], // 表格数据
      isMailedObj: { 0: '否', 1: '是' },
      logisticsStatusObj: { 0: '未发放', 1: '已发放' },
      // 查询参数
      form: {},
      formRules: {},
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.form = this.getForm();
          this.tableColumn = this.defaultTableColumn;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    hide() {
      this.resetForm();
      this.$emit('update:visible', false);
    },
    // 获取活动列表
    getData() {
      if (!this.params.fieldId) return;
      this.dataLoading = true;
      api.getBookRecordList({ fieldId: this.params.fieldId, ...this.form }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.dataLoading = false;
      });
    },
    // 搜索按钮操作
    handleQuery() {
      this.form.pageNum = 1;
      this.getData();
    },
    getForm() {
      let form = {
        pageNum: 1,
        pageSize: 20,
        nickName: '',
      };
      return form;
    },
    resetForm() {
      this.form = this.getForm();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/dialog.scss';
@import '@/assets/styles/mixin.scss';

// ::v-deep .el-dialog__body {
//   height: 100% !important;
// }

.dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@include table-page-style;
</style>
